<script lang="ts" setup>

defineOptions({
  name: 'BaseGameList',
})
const emit = defineEmits(['page', 'more'])

interface Props {
  columnsNum?: number // 列数
  data: any
  page?: number
  pageSize?: number
  total?: number
  loading?: boolean
  moreLoading?: boolean
  mode?: 'page' | 'more' //加载方式
}
const props = withDefaults(defineProps<Props>(), {
  columnsNum: 3,
  data: [],
  page: 1,
  pageSize: 10,
  total: 0,
  loading: false,
  moreLoading: false,
  mode: 'page'
})
const currentPage = ref(props.page)
const totalPage = computed(() => Math.ceil(props.total / props.pageSize))

function more() {
  emit('more')
  currentPage.value++
}

watchEffect(() => {
  emit('page', currentPage.value)
})
</script>
<template>
  <div v-if="loading" class="flex center py-10">
    <BaseLoading />
  </div>
  <div v-else>
    <div v-if="data.length > 0">
      <div :style="`--grid-column: ${columnsNum};`" class="mt-4 grid gap-1 grid-col-3">
        <BaseGameItem v-for="(item, i) in data" :game-info="item" :key="i" />
      </div>
      <template v-if="mode === 'page'">
        <BasePagination v-if="totalPage > 1" :total-page="totalPage" v-model="currentPage"></BasePagination>
      </template>
      <template v-else>
        <div class="flex center py-10" v-show="currentPage < totalPage">
          <BaseButton v-if="moreLoading" type="secondary" class="h-9 px-[2.1875rem] bg-bg-black-3">
            <BaseLoading style="--tg-base-loading-size: 1rem; border-width: 2px;" />
          </BaseButton>
          <BaseButton v-else type="secondary" class="h-9 pl-3 bg-bg-black-3" @click="more">
            <div class="text-xs font-bold mr-1">
              {{ $t('load_more') }}
            </div>
            <BaseIcon name="uni-arrow-down" class="text-sm" />
          </BaseButton>
        </div>
      </template>
    </div>
    <BaseEmpty v-else icon="" :description="$t('search_no_result')" />
  </div>
</template>

<style scoped lang="scss">
.grid-col-3 {
  --grid-gap: .25rem;
  --grid-column: 3;
  --grid-cols: var(--grid-column);
  --item-width: calc((100% - var(--grid-gap) * (var(--grid-cols) - 1)) / var(--grid-cols));
  grid-template-columns: repeat(auto-fill, var(--item-width));
  grid-auto-columns: var(--item-width);
}
</style>
